<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import menuConfig from './config/menu.json'

const route = useRoute()
const activeMenu = ref(route.path)

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath
  }
)

const handleLogout = () => {
  // 退出登录逻辑
  console.log('退出登录')
}
</script>

<template>
  <div class="app-container">
    <!-- 顶部标题栏 -->
    <header class="header">
      <h1 class="title">教学管理系统</h1>
    </header>

    <div class="main-container">
      <!-- 左侧菜单栏 -->
      <aside class="sidebar">
        <el-menu :default-active="activeMenu" class="menu" router>
          <template v-for="item in menuConfig.menu" :key="item.path">
            <!-- 一级菜单 -->
            <template v-if="!item.children">
              <el-menu-item :index="item.path">
                <el-icon v-if="item.icon">
                  <component :is="item.icon" />
                </el-icon>
                <span>{{ item.title }}</span>
              </el-menu-item>
            </template>

            <!-- 二级菜单 -->
            <el-sub-menu v-else :index="item.path">
              <template #title>
                <el-icon v-if="item.icon">
                  <component :is="item.icon" />
                </el-icon>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
                {{ child.title }}
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </aside>

      <!-- 右侧内容区 -->
      <main class="content">
        <router-view></router-view>
      </main>
    </div>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  height: 60px;
  background-color: #409EFF;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;

  .title {
    font-family: KaiTi, "楷体";
    font-size: 30px;
    margin: 0;
  }

  .user-info {
    a {
      color: white;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.main-container {
  flex: 1;
  display: flex;
  overflow: hidden;
  height: calc(100vh - 60px);
}

.sidebar {
  width: 240px;
  background-color: #fff;
  border-right: 1px solid #dcdfe6;
  flex-shrink: 0;
  overflow-y: auto;

  .menu {
    height: 100%;
    border-right: none;
  }
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f7fa;
}
</style>
